<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src='lib/webgl-utils.js'></script>
    <script src='lib/webgl-debug.js'></script>
    <script src='lib/cuon-utils.js'></script>
    <script src="lib/cuon-matrix.js"></script>
</head>
<body onload="main()">
<canvas id="mybox" width="500" height="500">
    请更换新版浏览器查看效果!
</canvas>
<script >

let VSHADER_SOURCE =`
  attribute vec4 a_position;
  attribute vec4 a_color;
  uniform mat4 u_viewMatrix;
  uniform mat4 u_modelMatrix;
  varying vec4 v_color;
  void main() {
    gl_Position = u_viewMatrix * u_modelMatrix * a_position;;
    v_color = a_color;
  }`

// Fragment shader program
let FSHADER_SOURCE =`
  #ifdef GL_ES
  precision mediump float;
  #endif
  varying vec4 v_color;
  void main() {
  gl_FragColor=v_color;
  }`
  

function main() {
  let canvas = document.getElementById('mybox');

  let gl = getWebGLContext(canvas);
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }

  // Initialize shaders
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.');
    return;
  }

  // Set the vertex information
  let n = initVertexBuffers(gl);
  if (n < 0) {
    console.log('Failed to set the vertex information');
    return;
  }

  // Specify the color for clearing <canvas>
  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  let u_viewMatrix=gl.getUniformLocation(gl.program,'u_viewMatrix');
  let u_modelMatrix=gl.getUniformLocation(gl.program,'u_modelMatrix');
  if (!u_viewMatrix) { 
    console.log('Failed to get the storage locations of u_ViewMatrix');
    return;
  }
  if (!u_modelMatrix) { 
    console.log('Failed to get the storage locations of u_modelMatrix');
    return;
  }

  let viewMatrix=new Matrix4();
  viewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0);

  let modelMatrix=new Matrix4();
  modelMatrix.setRotate(-10,0,0,1);
  gl.uniformMatrix4fv(u_viewMatrix,false,viewMatrix.elements);
  gl.uniformMatrix4fv(u_modelMatrix,false,modelMatrix.elements);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLES,0,n);

}

function initVertexBuffers(gl) {
  let verticesColor = new Float32Array([
    // Vertex coordinates and color(RGBA)
    0.0,  0.5,  -0.4,  0.4,  1.0,  0.4, // The back green one
    -0.5, -0.5,  -0.4,  0.4,  1.0,  0.4,
     0.5, -0.5,  -0.4,  1.0,  0.4,  0.4, 
   
     0.5,  0.4,  -0.2,  1.0,  0.4,  0.4, // The middle yellow one
    -0.5,  0.4,  -0.2,  1.0,  1.0,  0.4,
     0.0, -0.6,  -0.2,  1.0,  1.0,  0.4, 

     0.0,  0.5,   0.0,  0.4,  0.4,  1.0,  // The front blue one 
    -0.5, -0.5,   0.0,  0.4,  0.4,  1.0,
     0.5, -0.5,   0.0,  1.0,  0.4,  0.4, 
  ]);
  let n = 9; // The number of vertices

  // Create the buffer object
  let vertexColorBuffer = gl.createBuffer();
  if (!vertexColorBuffer) {
    console.log('Failed to create the buffer object');
    return -1;
  }

  // Bind the buffer object to target
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, verticesColor, gl.STATIC_DRAW);

  let FSIZE = verticesColor.BYTES_PER_ELEMENT;
  //Get the storage location of a_Position, assign and enable buffer
  let a_position = gl.getAttribLocation(gl.program, 'a_position');
  if (a_position < 0) {
    console.log('Failed to get the storage location of a_position');
    return -1;
  }
  gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, FSIZE * 6, 0);
  gl.enableVertexAttribArray(a_position);  // Enable the assignment of the buffer object

  // Get the storage location of a_TexCoord
  let a_color = gl.getAttribLocation(gl.program, 'a_color');
  if (a_color < 0) {
    console.log('Failed to get the storage location of a_color');
    return -1;
  }
  // Assign the buffer object to a_TexCoord letiable
  gl.vertexAttribPointer(a_color, 2, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
  gl.enableVertexAttribArray(a_color);  // Enable the assignment of the buffer object

  return n;
}
</script>

</body>
</html>